<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path=request.getScheme()+"://"+request.getServerName()+":"+
	request.getServerPort()+request.getContextPath()+"/";
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=this.getServletContext().getContextPath() %>/register/">
    <title>挂号</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../static/css/style.css" />
    <script type="text/javascript" src="../static/js/jquery-3.4.1.js"></script>

    <script type="text/javascript" src="../static/js/bootstrap.js"></script>
    <script type="text/javascript" src="../static/js/ckform.js"></script>
    <script type="text/javascript" src="../static/js/common.js"></script>
    <script type="text/javascript" src="../static/js/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="../static/js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="../static/js/jquery.validate.js"></script>
    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
		.error{
			color:red;
		}

    </style>

</head>
<body>
<form action="" method="post" class="definewidth m20" id="regiserAdd">

<table class="table table-bordered table-hover definewidth m10">
	<tr>
        <td width="10%" class="tableleft">病历号</td>
        <td><input type="text" name="rid" value=""/></td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">姓名</td>
        <td><input type="text" name="name" value=""/></td>
    </tr>

    <tr>
        <td width="10%" class="tableleft">身份证号</td>
        <td><input type="text" name="idCard" value=""/></td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">社保号</td>
        <td><input type="text" name="siNumber" value=""/></td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">挂号费</td>
        <td><input type="text" name="registerMoney" value=""/>元</td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">联系电话</td>
        <td><input type="text" name="phone" value=""/></td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">是否自费</td>
        <td><input type="radio" name="isPay" value="0" checked/>否&nbsp;&nbsp;&nbsp;
            <input type="radio" name="isPay" value="1"/>是</td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">性别</td>
        <td><input type="radio" name="sex" value="0" checked/>男&nbsp;&nbsp;&nbsp;
            <input type="radio" name="sex" value="1"/>女</td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">年龄</td>
        <td><input type="text" name="age" value=""/></td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">初复诊</td>
        <td><input type="radio" name="consultation" value="0" checked/>初诊&nbsp;&nbsp;&nbsp;
            <input type="radio" name="consultation" value="1"/>复诊</td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">所挂科室</td>
        <td>
        	<select name="department" id="department">
        		<option value="1">急诊科</option>
        		<option value="2">儿科</option>
        		<option value="3">妇科</option>
        		<option value="4">皮肤科</option>
        		<option value="5">内分泌科</option>
        		<option value="6">牙科</option>
        	</select>
        </td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">指定医生</td>
        <td>
        	<select name="did" id="doctor">

	        </select>
    </tr>
	<tr>
        <td width="10%" class="tableleft">备注</td>
        <td><textarea name="remark"></textarea></td>
	</tr>
    <tr>
        <td colspan="2">
			<center>
				<button  class="btn btn-primary" type="button" id= "register_save">保存</button> &nbsp;&nbsp;<button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
			</center>
		</td>
    </tr>
</table>
</form>


    <script type="text/javascript">
    	$(function() {
			// 获取医生列表
			$.ajax({
				url:"${path}doctors/getdoctors",
 	 			type:"get",
 	 			dataType:"json",
 	 			success:function(message){
 	 				$.each(message,function(index,item){
 	 					doctor_list(item);
 	 				});
 	 			}
				
			})
	
		});
    	
    	
    	// 渲染医生列表
    	function doctor_list(item){
    		var option =  '<option value="'+item.did+'" >'+item.name+'</option>';
    		$("#doctor").append($(option));
    	}
    	$("#backid").click(function(){
    		window.location.href = "${path}register/index.jsp";
    	});
    	
    	
    	
    	
    	
    	//自定义手机号验证
    	jQuery.validator.addMethod("isPhoneNum", function(value, element) {
    	  var length = value.length;
    	  var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
    	  return this.optional(element) || (length == 11 && mobile.test(value));
    	}, "请正确填写您的手机号码");

    	/* 表单验证 */
    	$("#regiserAdd").validate({
    		
    		onfocusout: function(element) { $(element).valid(); },
    		rules:{
    			rid:{			// 病历号
    				required:true
    			},
    			name:{
    	            required:true
    	        },
    	        idCard:{ // 身份证号
    	            required:true
    	        },
    	        siNumber:{	// 社保号
    	        	required:true
    	        } ,
    	        registerMoney:{
    	        	required:true,
    	        	number:true
    	        },
    	        phone:{	// 联系电话
    	        	required:true,
    	        	isPhoneNum:true
    	        },
    	        age:{	 // 年龄
    	        	required:true,
    	        	number:true
    	        },
    	        remark:{	// 备注
    	        	required:true
    	        }
    	    },
    	    messages:{
    	    	rid:{			// 病历号
    				required:"病例号不能为空"
    			},
    			name:{
    	            required:"用户名不能为空"
    	        },
    	        idCard:{ // 身份证号
    	            required:"身份证号不能为空"
    	        },
    	        siNumber:{	// 社保号
    	        	required:"社保号不能为空"
    	        } ,
    	        registerMoney:{
    	        	required:"挂号费不能为空",
    	        	number:"请填写数字"
    	        },
    	        phone:{	// 联系电话
    	        	required:"电话不能为空",
    	        	isPhoneNum:"请填写一下正确的电话号码",
    	        },
    	        age:{	 // 年龄
    	        	required:"年龄不能为空",
    	        	number:"请填写正确的年龄"
    	        },
    	        remark:{	// 备注
    	        	required:"请填写一下备注好吗？"
    	        }
    	    },
    	    errorElement: "em",
    	   
    	});

    	
    	$("#register_save").click(function(){
    		
    		var flag = $("#regiserAdd").valid();
    		if(!flag){
    			alert("请将表单合法填写完。")
    		}else{
    			
    			
    			var data = $("#regiserAdd").serialize();
				alert(data);

    	 		$.ajax({
    	 			url:"${path}registers/add",
    	 			type:"POST",
    	 			data:data,
    	 			dataType:"json",
    	 			success:function(message){
    	 				if(message.status_code == 200){
    	 					alert(message.message);
    	 					window.location.href = "index.jsp"
    	 				}else{
    	 					alert(message.message);
    	 				}

    	 			}
    	 		});
    			
    		}

    	});
    	
    	
    	
    	
    	
    	
    	
    	
    	
    </script>





</body>
</html>